<template>
    <el-dialog v-model="DialogShow" width="30%" title="提交作业" center custom-class="custom_class ">
        <div class="main">
            <el-upload class="upload-demo" drag :before-remove="beforeRemove" :on-remove="handleRemove"
                action="http://123.249.111.34:3000/uploadFile" accept=".pdf,.docx" :before-upload="beforeUpload"
                multiple :limit="1" v-model:file-list="fileList">
                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    Drop file here or <em>click to upload</em>
                </div>
                <template #tip>
                    <div class="el-upload__tip">

                    </div>
                </template>
            </el-upload>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="DialogShow = false">取消</el-button>
                <el-button type="primary" @click="submitForm"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';

import useUserInfo from "store/useUserInfo.js";
const useUserInfoStore = useUserInfo();
import { storeToRefs } from 'pinia'
const { userInfo } = storeToRefs(useUserInfoStore)

import { ElMessage, ElMessageBox } from 'element-plus'

const props = defineProps(['show', 'wid'])
const emit = defineEmits(['update:show', 'onSubmit'])

import { studentAnswerApi } from "@/api/index";



const DialogShow = ref(false)
watch(() => props.show, (newVal) => {
    console.log(newVal, 'newVal');
    if (!newVal) {
        fileList.value = []
    }
    DialogShow.value = newVal;
});
watch(() => DialogShow.value, (newVal) => {
    emit('update:show', newVal);
});




// 上传前
const beforeUpload = (file) => {
    // 在文件上传之前进行校验  
    const isPDFOrDOCX = file.type === 'application/pdf' || file.type === 'application/vnd.openxmlformats-officedocument.wordprocessingml.document';
    if (!isPDFOrDOCX) {
        ElMessage({
            showClose: true,
            message: "只能上传pdf/docx文件",
            type: "error",
        });
        return false;
    }
    return isPDFOrDOCX;
}

const fileList = ref([])

const submitForm = async () => {

    const params = {
        workRecordId: props.wid,
        userId: userInfo.value.userId,
        type: 1,
    }
    const url = handleAvatarSuccess()
    params.url = url
    const res = await studentAnswerApi(params)
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `添加成功!`,
        type: "success",
    });
    emit('onSubmit')
    DialogShow.value = false;
}
// 处理上传的图片地址
const handleAvatarSuccess = () => {
    const file = fileList.value[0].response.data.data;
    const { Location } = file
    // 拼接地址
    return `http://${Location}`
}
</script>

<style lang="scss"></style>